<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <link rel="stylesheet" href="/static/home/css/reset.css">
    <link rel="stylesheet" href="/static/home/plug/layui/css/layui.css">
    <title>人脸识别</title>
    <script type="text/javascript" src="/static/home/js/jquery-3.1.1.min.js"></script>
    <script src="/static/home/plug/layui/layui.js"></script>
    <script>
        var local_url="/static/admin/js/";
        var deviceWidth = document.documentElement.clientWidth;
        document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
    </script>
    <script src="/static/admin/js/base.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background: #fff;
        }

        .content {
            border-bottom: 0.15rem solid #f4f4f4;
        }

        .list {
            font-size: 0.26rem;
            color: #666666;
            font-weight: 500;
            padding: 0 0.32rem;
            width: 7.5rem;
            border-bottom: 1px solid #e5e5e5;
            display: flex;
            height: 1.02rem;
            line-height: 1.02rem;
            justify-content: space-between;
        }

        .val {
            color: #333333;
            font-weight: bolder;
        }

        .value {
            font-weight: bolder;
            flex: 1;
            text-align: right;
            border: 0;
            font-size: 0.26rem;
        }

        .tl span, .bottom span {
            color: red;
            margin-right: 0.06rem;
            font-weight: bolder;
        }

        .bottom {
            font-size: 0.26rem;
            padding: 0.66rem 0.32rem 0;
            cursor: pointer;
        }

        .btn1 {
            width: 6.6rem;
            height: 0.84rem;
            background: #00BFFF;
            color: #fff;
            text-align: center;
            line-height: 0.84rem;
            border-radius: 0.42rem;
            font-size: 0.3rem;
            border: 1px solid #00BFFF;
            margin: .74rem auto 0.58rem;
            cursor: pointer;
            font-weight: bolder;
        }

        .btnwrapper {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 40px;
        }

        .btnwrapper .btn {
            display: block;
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
            border: solid 1px #33a6fa;
            border-radius: 20px;
            color: #33a6fa;
            font-size: 18px;
            margin: 0 0.32rem;
        }

        #imgshow {
            /*display: none;*/
            position: relative;
            text-align: center;
            margin: 0 0.32rem;
            margin-top: 15px;
        }
        #imgshow #rect {
            position: absolute;
            border: 2px solid #ffff00;
        }
        #imgshow img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }


    </style>
</head>
<body>
<form class="layui-form">

    <input type="hidden" name="user_id" value="{$homeuser_info.user_id}"/>

    <div class="content">
        <div class="list">
            <div class="tl"><span>*</span>姓名</div>
            <input class="value" value="{$homeuser_info.username}"/>
        </div>
    </div>

    <div id="imgshow">
        <img src="{if $homeuser_info.faceimg}{$homeuser_info.faceimg}{else}{$homeuser_info.avatar_origin}{/if}" id="img" />
    </div>

    <div class="btnwrapper">
        <div id="btnUploadImg_rjimg" onclick="$('#imgInp').trigger('click');" class="btn">拍照</div>
        <input class="layui-upload-file" id="imgInp" type="file" accept="image/*" capture="camera">
        <input type="hidden" id="faceimg" name="faceimg" value="">
        <input type="hidden" id="faceimgid" name="faceimgid" value="">
    </div>

    <div class="bottom">
        <div class="tlt"><span onclick="window.location.href='https://gtportal.feishu.cn/wiki/L4abwRb2cixLFMkZombcA5wKnvf?chunked=false';">点击查看人脸录入及选取照片要求</span></div>
    </div>

    <div class="btn btn1" lay-submit="" lay-filter="add">提交</div>

</form>
</body>
<script type="text/javascript">

    layui.use(['element', 'form', 'jquery', 'laydate', 'lucky'], function () {

        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;
        var laydate = layui.laydate;
        var upload = layui.upload;
        var lucky = layui.lucky;

        form.render();


        $("#imgInp").change(function () {
            readURL(this);
        });

        function ajaxUploadBase64File(base64Data) {
            var url = "{:url('index/UpHomeImages')}";
            $.ajax({
                url: url,
                type: "post",
                data: {myPhoto: base64Data},
                dataType: "json",
                success: function (data) {
                    if (data.status == 200) {
                        console.log("上传成功");
                        console.log(data);
                        // return false;
                        //上传完毕回调
                        $("#img").attr("src",data.msg);
                        $("#faceimg").val(data.msg);
                        $("#faceimgid").val(data.img_id);
                        return false;
                    }
                    else {
                        console.log(data.msg);
                    }
                },
                error: function () {
                    console.log("上传失败");
                }
            });
        };
        function readURL(input) {
            if (input.files && input.files[0]) {
                $('.loadingImg').css('display', 'flex');

                var reader = new FileReader();
                reader.onload = function (e) {
                    var base64 = null;
                    //图片方向角 added by lzk
                    var Orientation = null;
                    var image = new Image();
                    image.src = e.target.result;
                    image.onload = function () {
                        var expectWidth = this.naturalWidth;
                        var expectHeight = this.naturalHeight;

                        if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
                            expectWidth = 800;
                            expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
                        } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
                            expectHeight = 1200;
                            expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
                        }
                        var canvas = document.createElement("canvas");
                        var ctx = canvas.getContext("2d");
                        canvas.width = expectWidth;
                        canvas.height = expectHeight;
                        console.log(expectWidth);
                        ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
                        //修复ios
                        if (navigator.userAgent.match(/iphone/i)) {
                            console.log('iphone');
                            //alert(expectWidth + ',' + expectHeight);
                            //如果方向角不为1，都需要进行旋转 added by lzk
                            if (Orientation != "" && Orientation != 1) {
                                switch (Orientation) {
                                    case 6://需要顺时针（向左）90度旋转
                                        rotateImg(this, 'left', canvas);
                                        break;
                                    case 8://需要逆时针（向右）90度旋转
                                        rotateImg(this, 'right', canvas);
                                        break;
                                    case 3://需要180度旋转
                                        rotateImg(this, 'upside', canvas);
                                        break;
                                }
                            }
                            base64 = canvas.toDataURL("image/jpeg", 0.7);
                        } else if (navigator.userAgent.match(/Android/i)) {
                            // 修复android
                            //var encoder = new JPEGEncoder();
                            //base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
                            base64 = canvas.toDataURL("image/jpeg", 0.7);
                        } else {
                            //alert(Orientation);
                            if (Orientation != "" && Orientation != 1) {
                                //alert('旋转处理');
                                switch (Orientation) {
                                    case 6://需要顺时针（向左）90度旋转
                                        rotateImg(this, 'left', canvas);
                                        break;
                                    case 8://需要逆时针（向右）90度旋转
                                        rotateImg(this, 'right', canvas);
                                        break;
                                    case 3://需要180度旋转
                                        rotateImg(this, 'upside', canvas);
                                        break;
                                }
                            }

                            base64 = canvas.toDataURL("image/jpeg", 0.8);
                        }
                        console.log('////11');
                        ajaxUploadBase64File(base64);
                    }
                }

                reader.readAsDataURL(input.files[0]);
            }
        }

        /**
         * 提交表单数据
         */
        form.on('submit(add)', function (data) {
            console.log(data.field);
            // return false;
            lucky.FormSubmit("{:url('index/face')}", data.field, 0 , 0 , "{:url('index/face')}");
            return false;
        });


    });

</script>
</html>